<!--  -->
<template>
  <div class="container">
    <div class="row at-row no-gutter flex-center">
      <div class="col-md-22 maincontent">
        <at-menu mode="horizontal" active-name="1">
          <at-menu-item name="1">
            <i class="icon icon-chevron-left" @click="mback"></i>预定详情
          </at-menu-item>
        </at-menu>
        <div class="meetingroom">
          <div class="cover"></div>
          <div class="row at-row">
            <div :class="`col-md-8 infor animated  fadeIn`">
              <div class="at-box-row bg-c-brand-dark">
                <div class="meetingroomname">{{datalist.name}}</div>
                <div class="meetingroomposition">{{datalist.addr}}</div>
                <div class="desc">{{datalist.desc}}</div>
              </div>
            </div>
            <div class="col-md-16 des">
              <div class="host" v-if="datalist.host">
                <div style=" text-align: left;
            margin: 0 30px;">
                  <div class="mvalue animated fadeIn">{{datalist.host.nick}}</div>
                  <span class="title">会议发起人</span>
                </div>
              </div>
              <div class="room">
                <div style=" text-align: left;
            margin: 0 30px;" v-if="datalist.room">
                  <div class="mvalue animated fadeIn">{{datalist.room.name}}</div>
                  <span class="title">会议室</span>
                </div>
                <div style=" text-align: left;
            margin: 0 30px;" v-if="datalist.room">
                  <div class="mvalue animated fadeIn">{{datalist.room.addr}}</div>
                  <span class="title">会议地点</span>
                </div>
              </div>
              <div class="timeshow">
                <div class="starttime">
                  <div class="time animated fadeIn">{{datalist.startTime | dateFormat}}</div>
                  <span class="title">开始时间</span>
                </div>
                <div class="endtime">
                  <div class="time animated fadeIn">{{datalist.endTime |dateFormat}}</div>
                  <span class="title">结束时间</span>
                </div>
              </div>
              <div class="group" v-if="datalist.users">
                <div style=" text-align: left;
            margin: 0 30px;">
                  <div class="mvalue">
                    <span
                      class="animated fadeIn"
                      v-for="(useritem,userindex) in datalist.users"
                      :key="userindex"
                      style="margin-right:10px"
                    >
                    <span v-if="useritem!=null">{{useritem.nick}}</span>
                    </span>
                  </div>
                  <span class="title">会议参与者</span>
                </div>
              </div>
              <div class="deviceshow" style="margin-top:30px">
                <at-card
                  style="margin-right:20px"
                  :body-style="{ padding: 0 }"
                  v-for="(item,index) in meetingroominfor.device"
                  :key="index"
                  :class="`animated bounceInUp delay-${index}s`"
                >
                  <div>
                    <div class="devicepic">
                      <i class="icon icon-airplay" v-if="item.name=='投影仪'"></i>
                      <i class="icon icon-speaker" v-else-if="item.name=='摄像头'"></i>
                      <i class="icon icon-airplay" v-else-if="item.name=='设备遥控'"></i>
                      <i class="icon icon-monitor" v-else-if="item.name=='27寸屏幕'"></i>
                      <i class="icon icon-package" v-else></i>
                    </div>
                    <div class="line"></div>
                    <div class="devicename">
                      <at-badge :value="item.number" status="info">
                        <span>{{item.name}}</span>
                      </at-badge>
                    </div>
                  </div>
                </at-card>
              </div>
              <!-- <div class="mbutton">
                <at-button
                  type="primary"
                  v-if="datalist.status==0"
                  @click="showdialog(datalist)"
                  style="z-index:999"
                >取消预定</at-button>
                <at-button type="primary" v-if="datalist.status==1">续订</at-button>
              </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <at-modal v-model="dialogVisible" height="60%">
      <div slot="header" style="text-align:center;">
        <span>确认信息</span>
      </div>
      <div style="text-align:center;">
        <span>确认要取消预定吗?</span>
      </div>
      <div slot="footer">
        <at-button @click="dialogVisible=false">取消</at-button>
        <at-button type="primary" @click="deletereservation(listitem)">确定</at-button>
      </div>
    </at-modal>-->
  </div>
</template>

<script>
import { back, dateDiff } from "../../assets/js/common";
export default {
  filters: {},
  data() {
    return {
      datalist: {},
      meetingroominfor: {
        device: [
          {
            name: "投影仪",
            number: 1
          },
          {
            name: "摄像头",
            number: 2
          },
          {
            name: "27寸屏幕",
            number: 2
          }
        ],
        dialogVisible: true,
        listitem: "",
        ifdelete: ""
      }
    };
  },

  created() {
    this.datalist = this.$route.query.infor;
    if (this.datalist.status == 0) {
      let time = dateDiff(this.datalist.startTime);
      const h = this.$createElement;
      this.$notify({
        title: "提示",
        // message: h("i", { style: "color: red" }, `会议将于${time}开始`),
        message:
          "会议将于 <strong style='color:red'>" + time + " </strong>开始",
        dangerouslyUseHTMLString: true,
        duration: 0
      });
    }
  },
  components: {},

  computed: {},

  methods: {
    showdialog(data, ifdelete) {
      this.ifdelete = ifdelete;
      this.dialogVisible = true;
      this.listitem = data;
    },
    deletereservation(data) {
      // Axios.delete("/api/api/user/meeting?ID=" + data.id).then(res => {
      //   console.log(res);
      // });
      console.log(data);
      let that = this;
      if (this.ifdelete == "delete") {
        this.meetinglist = this.meetinglist.filter(item => {
          return item.ID != data.ID;
        });
        Axios.delete("/api/api/user/meeting/" + data.ID, {
          headers: {
            Authorization: getCookie("token")
          }
        }).then(res => {
          that.$message({
            type: "success",
            message: "删除成功"
          });
          that.$router.push("/myreserve");
        });
      } else {
        this.$set(data, "status", 3);
      }
      this.changeMeetings({
        meetings: this.meetinglist
      });
      this.getpathlist(this.meetinglist);
      this.dialogVisible = false;
      that.$router.push("/myreserve");
    },
    mback() {
      back();
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  height: calc(100% - 130px);
  background: #f9faff;
  position: relative;
  .maincontent {
    background: url("../../assets/images/detailbg.jpg");
    width: 100%;
    position: absolute;
    background-size: (100%, auto);
    top: 0;
    bottom: 20px;
    .meetingroom {
      height: calc(100% - 48px);
      width: 100%;
      background: url("../../assets/images/meetingroombg.jpg");
      background-position: 50%;
      background-size: cover;
      position: relative;
      .cover {
        position: absolute;
        top: 0;
        bottom: 0;
        background: #00000080;
        width: 100%;
        height: 100%;
      }
      .row,
      .infor,
      .des {
        height: 100%;
        color: white;
        z-index: 2;
      }
      .infor {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .meetingroomname,
        .meetingroomposition,
        .desc {
          width: 60%;
          margin: 0 auto;
          text-align: right;
        }
        .meetingroomname {
          font-size: 60px;
          font-weight: bold;
        }
        .meetingroomposition {
        }
        .desc {
          border-top: 1px solid #ccc;
          margin: 10px auto;
          text-align: right;
          padding: 10px 0;
        }
      }
      .des {
        height: 100%;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .host,
        .room,
        .group {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          .mvalue {
            font-size: 25px;
            font-weight: bold;
            padding: 20px 0;
          }
          .title {
            border-top: 1px solid #ccc;
            padding: 10px 2px;
          }
        }
        .timeshow {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          .starttime,
          .endtime {
            text-align: left;
            margin: 0 30px;
            .time {
              font-size: 25px;
              font-weight: bold;
              padding: 20px 0;
            }
            .title {
              border-top: 1px solid #ccc;
              padding: 10px 2px;
            }
          }
        }
        .deviceshow {
          display: flex;
          color: black;
          margin: 10px 30px;
          .devicepic {
            width: 110px;
            margin-top: 20px;
            i {
              font-size: 25px;
              color: black;
            }
          }
          .line {
            width: 15px;
            height: 1px;
            background: #3e76de;
            margin: 20px auto;
          }
          .devicename {
            margin-bottom: 20px;
          }
        }
        .mbutton {
          width: 60%;
          margin-top: 30px;
          padding: 20px;
          text-align: right;
          button {
            transition: transform 0.5s;
          }
          button:hover {
            transform: scale(1.1);
          }
        }
      }
    }
    .blankcontainer {
      height: 150px;
    }
    .detail {
      background: white;
      height: calc(100% - 299px);
      display: flex;
      justify-content: space-around;
      padding: 10px 50px;
      .detailimg img {
        width: 50%;
      }
    }
    .cls-1,
    .cls-2 {
      fill: #fff;
    }
    .cls-2 {
      opacity: 0.4;
    }
    #curve1 {
      display: block;
    }
  }
}
</style>